/*------------------------------------*\
    #MIXINS
\*------------------------------------*/

/**
 * Body Styles
 * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
 */
@mixin typographyBody() {
   font-family: $font-primary;
   font-size: $font-size-med-2;
   font-weight: 500;
   line-height: 1.6;
   -webkit-text-size-adjust: 100%; /* 1 */
}

/**
 * XL Type Styles
 */
@mixin typographyBodyLarge() {
   font-size: $font-size-med-2;
   line-height: $line-height-large;
}

/**
 * XL Heading Styles
 */
@mixin typographyHeadingXl() {
   font-weight: $font-weight-bold;
   font-size: $font-size-large-2;
   line-height: $line-height-med-2;

   @media all and (min-width: $bp-med) {
      font-size: $font-size-xl;
   }
}

/**
 * Large Heading Styles
 */
@mixin typographyHeadingLarge() {
   font-size: $font-size-large;
   font-weight: 700;
   line-height: 1.6;
}

/**
 * Medium 2 Heading Styles
 */
@mixin typographyHeadingMed2() {
   font-size: $font-size-med-2;
   font-weight: 700;
   line-height: 1.2;
}

/**
 * Medium Heading Styles
 */
@mixin typographyHeadingMed() {
   font-size: $font-size-med;
   font-weight: 700;
   line-height: 1.2;
}

/*------------------------------------*\
    #FOCUS
\*------------------------------------*/

@mixin focus() {
   outline: 2px dotted $color-black;
   outline-offset: 4px;
}

@mixin focusInverted() {
   outline: 1px dotted $color-white;
   outline-offset: 4px;
}

/*------------------------------------*\
    #DECORATIVE
\*------------------------------------*/

@mixin textShadowEffect() {
   position: relative;
   z-index: 1;

   &::after {
      position: absolute;
      left: 4px;
      top: 4px;
      z-index: 0;
      content: attr(data-text);

      // Mitigating the positioning by 4px from the left to not have the words break incorrectly (see #GH-1158)
      margin-right: -4px;

      background-image: radial-gradient(
         $color-brand-purple 0%,
         $color-brand-purple 60%,
         transparent 60%
      );
      background-size: 4px 4px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: -5;
      display: block;
      text-shadow: none;

      @media all and (max-width: $bp-large) {
         left: 2px;
         top: 2px;
         background-size: 2px 2px;
      }
   }
}

@mixin boxShadowEffect($color: 'green') {
   @if $color == 'green' {
      box-shadow: 6px 6px 0 $color-brand-green, 12px 12px 0 $color-brand-green-light;
   } @else if $color == 'orange' {
      box-shadow: 6px 6px 0 $color-brand-orange, 12px 12px 0 $color-brand-orange-light;
   } @else {
      box-shadow: 6px 6px 0 $color-brand-purple, 12px 12px 0 $color-brand-purple-light;
   }
}

@mixin stripedBoxShadow($color: 'green') {
   @if $color == 'green' {
      background-image: repeating-linear-gradient(
         45deg,
         $color-brand-green,
         $color-brand-green 1px,
         transparent 1px,
         transparent 4px
      );
   } @else if $color == 'orange' {
      background-image: repeating-linear-gradient(
         45deg,
         $color-brand-orange,
         $color-brand-orange 1px,
         transparent 1px,
         transparent 4px
      );
   } @else {
      background-image: repeating-linear-gradient(
         45deg,
         $color-brand-purple,
         $color-brand-purple 1px,
         transparent 1px,
         transparent 4px
      );
   }
}

@mixin hideScrollbar() {
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   scrollbar-width: none;
   scrollbar-color: transparent;

   &::-webkit-scrollbar {
      height: var(--scrollbar-size);
      width: var(--scrollbar-size);
   }
   &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track-color);
   }
   &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-color);
      /* Add :hover, :active as needed */
   }
   &::-webkit-scrollbar-thumb:vertical {
      min-height: var(--scrollbar-minlength);
   }
   &::-webkit-scrollbar-thumb:horizontal {
      min-width: var(--scrollbar-minlength);
   }
}
